<template>
  <div class="topSelect" @click.stop="closeTooltips">
    <div class="topSelectLabel">
      <div class="name">岗位筛选</div>
    </div>
    <div class="topSelectList">
      <div class="topSelectContainer">
        <div class="jobRegionCheckbox">
          <span class="jobRegionCheckboxLabel">工作地点</span>
          <el-checkbox-group
            class="jobRegionCheckboxGroup"
            v-model="jobFilterDisplayData['regionid']"
            :class="{ optionsBox: true }"
            @change="handleCheckboxChange"
          >
            <el-checkbox
              :label="item.value + '-' + item.label"
              v-for="(item, index) in regionList"
              :key="index"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
          <el-tooltip
            placement="bottom"
            effect="light"
            popper-class="filterTooltipsContainer"
          >
            <div slot="content">
              <div class="TooltipsContent">
                <el-checkbox-group
                  class="TooltipsRegionCheckboxGroup"
                  v-model="jobFilterDisplayData['regionid']"
                  :class="{ optionsBox: true }"
                  @change="handleCheckboxChange"
                >
                  <el-checkbox
                    :label="item.value + '-' + item.label"
                    v-for="(item, index) in regionList"
                    :key="index"
                    >{{ item.label }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>
            <span class="regionTooltipsElement">其他地区</span>
          </el-tooltip>
        </div>
        <div class="jobFilterList">
          <span
            class="jobFilterItem"
            :class="{
              jobFilterItem: true,
              active: jobFilterDisplayData[item.prop].length > 0
            }"
            v-for="(item, index) in jobFilterList"
            :key="index"
          >
            <el-tooltip
              placement="bottom"
              effect="light"
              v-if="item.options.length > 1"
              popper-class="filterTooltipsContainer"
            >
              <div slot="content">
                <div class="jobFilterItemTooltipsContent TooltipsContent">
                  <el-checkbox-group
                    :class="[
                      'jobFilterItemTooltipCheckboxGroup',
                      'TooltipsRegionCheckboxGroup',
                      'optionsBox',
                      item.prop
                    ]"
                    v-model="jobFilterDisplayData[item.prop]"
                    @change="(e) => handleFilterCheckboxChange(e, item.prop)"
                  >
                    <el-checkbox
                      :label="_item.value"
                      v-for="(_item, _index) in item.options"
                      :key="_index"
                      >{{ _item.label }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
              </div>
              <span :class="{ jobFilterItemLabel: true }"
                >{{ getItemValueName(jobFilterDisplayData[item.prop].length > 0,item.label) }}
                <!-- <span
                  v-if="jobFilterData[item.prop].length>0">{{'('+jobFilterData[item.prop].length+')'}}
                </span > -->
              </span>
            </el-tooltip>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { eduList, salaryList, expList } from '@/utils/jobFilterData.js';
// import { hotCityList, cityDic } from '@/utils/regionData.js';
export default {
  name: 'jobFilter',
  data() {
    return {
      eduList,
      salaryList,
      expList,
      tooltipsVisible: true,
      currentClassList: [],
      // 下面这里要有两个Data，一个是用来显示的，一个是用来存储的，如果共用同一个会有触发问题
      // 如果在这里加了字段，还要在index里面加
      jobFilterData: {
        zpTrade: [],
        salary: [],
        gznum: ["-1||0"],
        eduId: [],
        regionid: []
      },
      jobFilterDisplayData: {
        zpTrade: [],
        salary: [],
        gznum: ['-1||0'],
        eduId: [],
        regionid: ['100000-全国']
      },
      jobFilterList: [
        { label: '薪酬待遇', options: salaryList, prop: 'salary' },
        { label: '工作经验', options: expList, prop: 'gznum' },
        { label: '学历要求', options: eduList, prop: 'eduId' }
      ],
      regionList: [
        {
          value: '100000',
          label: '全国'
        },
        {
          value: '110000',
          label: '北京'
        },
        { value: '310000', label: '上海' },
        {
          value: '440100',
          label: '广州'
        },
        {
          value: '440300',
          label: '深圳'
        },
        {
          value: '510100',
          label: '成都'
        },
        { value: '500000', label: '重庆' },
        { value: '330100', label: '杭州' },
        { value: '610100', label: '西安' },
        {
          value: '420100',
          label: '武汉'
        },
        {
          value: '320500',
          label: '苏州'
        },
        { value: '410100', label: '郑州' },
        { value: '320100', label: '南京' },
        {
          value: '120000',
          label: '天津'
        },
        { value: '430100', label: '长沙' },
        { value: '441900', label: '东莞' },
        {
          value: '330200',
          label: '宁波'
        },
        { value: '440600', label: '佛山' },
        {
          value: '340100',
          label: '合肥'
        },
        { value: '370200', label: '青岛' },
        {
          value: '530100',
          label: '昆明'
        },
        {
          value: '210100',
          label: '沈阳'
        },
        {
          value: '370100',
          label: '济南'
        },
        {
          value: '320200',
          label: '无锡'
        },
        {
          value: '350200',
          label: '厦门'
        },
        {
          value: '350100',
          label: '福州'
        },
        {
          value: '330300',
          label: '温州'
        },
        {
          value: '330700',
          label: '金华'
        },
        {
          value: '230100',
          label: '哈尔滨'
        },
        {
          value: '210200',
          label: '大连'
        },
        {
          value: '520100',
          label: '贵阳'
        },
        {
          value: '450100',
          label: '南宁'
        },
        { value: '350500', label: '泉州' },
        {
          value: '130100',
          label: '石家庄'
        },
        { value: '220100', label: '长春' },
        { value: '360100', label: '南昌' },
        { value: '441300', label: '惠州' },
        { value: '320400', label: '常州' },
        { value: '330400', label: '嘉兴' },
        { value: '320300', label: '徐州' },
        { value: '320600', label: '南通' },
        { value: '140100', label: '太原' },
        { value: '130600', label: '保定' },
        { value: '440400', label: '珠海' },
        { value: '442000', label: '中山' },
        {
          value: '620100',
          label: '兰州'
        },
        {
          value: '371300',
          label: '临沂'
        },
        { value: '370700', label: '潍坊' },
        { value: '370600', label: '烟台' },
        { value: '330600', label: '绍兴' }
      ]
    };
  },
  mounted() {
    let campusJobTrads = localStorage.getItem('campusJobTrads');
    if (campusJobTrads) {
      campusJobTrads = JSON.parse(campusJobTrads).map((item, index) => {
        return {
          value: item.tradeid,
          label: item.tradename
        };
      });
      this.jobFilterList.unshift({
        label: '公司行业',
        options: campusJobTrads,
        prop: 'zpTrade'
      });
    }
  },
  methods: {
    getItemValueName(isActive,name) {
      // jobFilterDisplayData[item.prop].length > 0
      if (isActive) {
        return name + " ( 1 )";
      } else {
        return name;
      }
    },
    reqGetFilterList() {
      const params = {};
      getNavigationTree(params)
        .then((res) => {
          if (res.code == 200) {
            this.jobFilterList = res.data;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    closeTooltips() {
      this.currentClassList.forEach((item) => {
        item.isShowTooltip = false;
      });
      this.secondSelectedItem = {};
    },
    handleFilterCheckboxChange(value, prop) {
      this.jobFilterData[prop] = [];
      this.jobFilterDisplayData[prop] = [];
      if (value && value.length) {
        // this.jobFilterData[prop].push(value[value.length - 1]);
        this.jobFilterData[prop][0] = value[value.length - 1];
        this.jobFilterDisplayData[prop][0] = value[value.length - 1];
      }
      console.log('handleFilterCheckboxChange', this.jobFilterData[prop]);

      this.$emit('selectedJobChecks', this.jobFilterData);
    },
    handleCheckboxChange(value) {
      this.jobFilterData['regionid'] = [];
      this.jobFilterDisplayData['regionid'] = [];
      if (value && value.length) {
        // this.jobFilterData["regionid"].push(value[value.length - 1]);
        this.jobFilterData['regionid'][0] = value[value.length - 1];
        this.jobFilterDisplayData['regionid'][0] = value[value.length - 1];
      }
      console.log("----------------------handleCheckboxChang-------------->", this.jobFilterData);
      
      this.$emit('selectedJobChecks', this.jobFilterData);
    }
  }
};
</script>
<style lang="scss" scoped>
.disn {
  display: none;
}
.topSelect {
  display: flex;
  position: sticky;
  top: 60px;
  margin: 0 14px 12px;
  padding: 16px 28px;
  padding-right: 70px;
  background: linear-gradient(180deg, #d0e3ff 0%, #f1f4f9 50%);
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.26);
  z-index: 4;
  width: calc(100% - 28px);
  .topSelectLabel {
    flex: 0 0 80px;
    font-size: 17px;
    display: flex;
    margin: 0 4px 0 0;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #c8d4e6;
    border-radius: 1px;
    padding-right: 15px;
    .name {
      width: 34px;
      position: relative;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #000000;
      line-height: 23px;
      // letter-spacing: 5px;
      font-size: 17px;
    }
    .name::before {
      content: '';
      z-index: -1;
      position: absolute;
      bottom: 2px;
      left: 50%;
      width: 32px;
      height: 10px;
      border-radius: 50% / 100% 100% 0 0;
      width: 32px;
      height: 8px;
      background: linear-gradient(180deg, #0b6eff 0%, #eff2f9 100%);
      transform: skewX(180deg) translateX(-55%) translateY(50%);
      opacity: 0.47;
      // clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }
  }
  .topSelectList {
    .topSelectContainer {
      padding-left: 29px;
      .jobRegionCheckbox {
        display: flex;
        .jobRegionCheckboxLabel {
          height: 20px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #222222;
          line-height: 20px;
          text-align: left;
          font-style: normal;
          margin-right: 24px;
        }
        .jobRegionCheckboxGroup {
          // max-width: calc(100% - 254px);
          max-width: calc(100% - 160px);
          max-height: 19px;
          overflow: hidden;
        }
        .regionTooltipsElement {
          height: 20px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #555555;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
      }
      .jobFilterList {
        margin-top: 14px;
        .jobFilterItem {
          height: 30px;
          background: #e3e9f3;
          border-radius: 4px;
          padding: 4px 8px;
          margin-right: 24px;
          .jobFilterItemLabel {
            width: 56px;
            height: 20px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #555555;
            line-height: 20px;
            text-align: left;
            font-style: normal;
          }
          &.active {
            background: #cadfff;
            .jobFilterItemLabel {
              color: #0b6eff;
            }
          }
        }
      }
    }
  }
}
// 最外面的容器的代码在index.scss中
.el-tooltip__popper {
  background: #fcfcfc;
  box-shadow: 0px 0px 26px 0px rgba(178, 181, 203, 0.5);
  border-radius: 8px;
}
.TooltipsContent {
  max-width: 373px;
  padding: 0 10px;
  .TooltipsRegionCheckboxGroup {
    ::v-deep .el-checkbox {
      min-width: auto;
      margin: 4px 0;
      margin-right: 14px;
    }
  }
  .zpTrade {
    ::v-deep .el-checkbox {
      width: 110px;
      margin-right: 7px;
    }
  }
  .gznum {
    ::v-deep .el-checkbox {
      width: 100px;
    }
  }
  .salary {
    ::v-deep .el-checkbox {
      width: 102px;
    }
  }
}
::v-deep .el-checkbox {
  font-weight: 400;
  .el-checkbox__inner {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background-color: transparent;
    border: 1px solid #9ea9c1;
  }
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: transparent;
  }
  .el-checkbox__input.is-focus .el-checkbox__inner {
    background-color: transparent;
    border-color: #dcdfe6;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: transparent;
    border-color: #409eff;
  }
  .el-checkbox__inner::after {
    left: 3px;
    height: 5px;
    width: 3px;
    border: 1px solid #409eff;
    border-left: 0;
    border-top: 0;
  }
  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    left: 3px;
    height: 5px;
    width: 3px;
    border: 1px solid #409eff;
    border-left: 0;
    border-top: 0;
    border-color: #409eff;
  }
}
::v-deep .el-checkbox__label {
  height: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #555555;
  line-height: 20px;
  text-align: left;
  font-style: normal;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #409eff;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__inner {
  color: #9ea9c1;
}
</style>
